<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            table,
            td {
                border-collapse: collapse;
            }
            td {
                padding: 10px 20px;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>

        <script type="text/babel">
            //需求
            //声明类式组件
            class Hero extends React.Component {
                state = {
                    heros: [
                        { id: 1, name: "孙膑", type: "辅助" },
                        { id: 2, name: "小乔", type: "中单" },
                        { id: 3, name: "扁鹊", type: "法师" },
                    ],
                };

                render() {
                    return (
                        <div>
                            <div className="form">
                                名字: <input type="text" ref={el => this.name = el} />
                                类型: <input type="text" ref={el => this.type = el} />
                                <button onClick={this.add}>新增</button>
                            </div>
                            <hr />
                            <table border="1">
                                <thead>
                                    <tr>
                                        <td>ID</td>
                                        <td>名字</td>
                                        <td>类型</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {
                                        this.state.heros.map((item, index) => {
                                            return <tr key={item.name}>
                                                <td>{item.id}</td>
                                                <td>{item.name}</td>
                                                <td>{item.type}</td>
                                                <td><input type="text" /></td>
                                            </tr>
                                        })
                                    }    
                                </tbody>
                            </table>
                        </div>
                    );
                }

                add = () => {
                    //获取输入的内容
                    let obj = {
                        name: this.name.value,
                        type: this.type.value,
                        id: this.state.heros.length + 1
                    }
                    //将 obj 压入到数组的头部
                    this.state.heros.unshift(obj);
                    // this.state.heros.push(obj);
                    //更新组件
                    this.setState({
                        heros: this.state.heros
                    })
                }
            }

            ReactDOM.render(<Hero />, document.querySelector("#root"));
        </script>
    </body>
</html>
